import { loginApi } from '@/services/api';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Form, message, theme } from 'antd';
import dianchi from './Image/电池.png';
import LoginSvg from './components/LoginSvg';
import styles from './index.less';

const Page = () => {
  const { token } = theme.useToken();

  const [form] = Form.useForm();

  const { refresh } = useModel('@@initialState');

  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100%',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <div className={styles['login_home']}>
        <LoginSvg />
      </div>
      <LoginFormPage
        form={form}
        logo={dianchi}
        // title="Battery"
        containerStyle={{
          backgroundColor: 'transparent',
        }}
        subTitle="换电管理系统"
        actions={
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'column',
            }}
          ></div>
        }
        onFinish={async (vales) => {
          console.log(vales);
          try {
            const { data } = await loginApi({
              ...vales,
            });

            localStorage.setItem('token', data.token);

            message.success('登录成功');

            refresh?.()

            history.push('/merchant');
          } catch (error) {}
        }}
      >
        <ProFormText
          fieldProps={{
            size: 'large',
            prefix: (
              <UserOutlined
                style={{
                  color: token.colorText,
                }}
                className={'prefixIcon'}
              />
            ),
          }}
          name="username"
          placeholder={'用户名'}
          rules={[
            {
              required: true,
              message: '请输入用户名！',
            },
          ]}
        />

        <ProFormText.Password
          fieldProps={{
            size: 'large',
            prefix: (
              <LockOutlined
                style={{
                  color: token.colorText,
                }}
                className={'prefixIcon'}
              />
            ),
          }}
          name="password"
          placeholder={'密码'}
          rules={[
            {
              required: true,
              message: '请输入密码！',
            },
          ]}
        />

        {/* <ProFormCaptcha
          fieldProps={{
            size: 'large',
            prefix: (
              <LockOutlined
                style={{
                  color: token.colorText,
                }}
                className={'prefixIcon'}
              />
            ),
          }}
          captchaProps={{
            size: 'large',
            disabled: !mobileValue,
          }}
          placeholder={'请输入验证码'}
          captchaTextRender={(timing, count) => {
            if (timing) {
              return `${count} ${'获取验证码'}`;
            }
            return '获取验证码';
          }}
          name="code"
          rules={[
            {
              required: true,
              message: '请输入验证码！',
            },
          ]}
          onGetCaptcha={async () => {
            try {
              const { data } = await getCaptchaApi({
                mobile: mobileValue,
              });

              message.success(`获取验证码成功！验证码为：${data}`);
            } catch (error) {}
          }}
        /> */}
        <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          {/* <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox> */}
        </div>
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider>
      <Page />
    </ProConfigProvider>
  );
};
